<template>
    <div>
            <el-form :model="filterForm" label-width="80px">
                <el-row>
                    <el-col :span="3">
                        <el-form-item label="病理编号">
                            <el-input v-model="filterForm.pathologyId" placeholder="请输入病理编号" class="input-form"
                                size="mini"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="上传日期">
                            <el-date-picker v-model="createdRange" class="time-picker-form" size="mini" type="datetimerange"
                                align="right" unlink-panels range-separator="-" start-placeholder="开始日期"
                                end-placeholder="结束日期"></el-date-picker>
                        </el-form-item>
                    </el-col>
                    <el-col :span="4">
                        <el-form-item class="el-form-item" label="所属医院">
                            <el-select v-model="filterForm.sliceHospital" class="picker-form" size="mini"
                                @change="getBranchList">
                                <el-option v-for="t in hospitalList" :key="t.id" :label="t.name" :value="t.id">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="4">
                        <el-form-item class="el-form-item" label="分院名称">
                            <el-select v-model="filterForm.branchName" placeholder="请选择分院" clearable class="picker-form"
                                size="mini">
                                <el-option v-for="item in branchCourtsList" :key="item.name" :label="item.name"
                                    :value="item.name"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="4">
                        <div class="expansion" @click="showExpansion = !showExpansion">
                            <font-awesome-icon v-if="!showExpansion" :icon="['fas', 'angle-down']"></font-awesome-icon>
                            <font-awesome-icon v-else :icon="['fas', 'angle-up']"></font-awesome-icon>
                        </div>
                        <el-button @click="search" type="primary" size="mini" style="margin-left: 15px">搜索</el-button>
                    </el-col>
                </el-row>

                <!--dispatcher扩展筛选-->
                <div v-if="showExpansion">
                    <el-row>
                        <el-col :span="6">
                            <el-form-item label="标本类别">
                                <el-select v-model="filterForm.specimenType" placeholder="请选择标本类别" clearable
                                    class="picker-form" size="mini">
                                    <el-option v-for="item in specimenCategoryList" :key="item.id" :label="item.name"
                                        :value="item.id"></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="切片类别">
                                <el-select v-model="filterForm.sliceCategory" placeholder="请选择切片类别" clearable
                                    class="picker-form" size="mini">
                                    <el-option v-for="item in sliceCategoryList" :key="item.id" :label="item.name"
                                        :value="item.id"></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="冰冻">
                                <el-select v-model="filterForm.freezeType" placeholder="请选择是否冰冻" clearable
                                    class="picker-form" size="mini">
                                    <el-option v-for="item in freezeTypeList" :key="item.id" :label="item.name"
                                        :value="item.id"></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="6">
                            <el-form-item label="切片用途">
                                <el-select v-model="filterForm.slicePurpose" placeholder="请选择切片用途" clearable
                                    class="picker-form" size="mini">
                                    <el-option v-for="item in sliceUsesList" :key="item.id" :label="item.name"
                                        :value="item.id"></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="取材脏器">
                                <el-select v-model="filterForm.sampleOrganId" placeholder="请选择取材脏器" clearable size="mini"
                                    class="picker-form">
                                    <el-option v-for="(
                                            organ, index
                                        ) in sampleOrganList" :key="index" :label="organ.name"
                                        :value="organ.id"></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="扫描批次">
                                <el-input v-model="filterForm.biopsyHistoryId" placeholder="请输入扫描批次" class="input-form"
                                    size="mini"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="6">
                            <el-form-item class="el-form-item" label="是否肿瘤">
                                <el-select v-model="filterForm.sliceIsTumor" placeholder="请选择是否肿瘤" clearable
                                    class="picker-form" size="mini">
                                    <el-option v-for="(data, index) in isneoplasmList" :key="index" :label="data.name"
                                        :value="data.id"></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item class="el-form-item" label="肿瘤分类">
                                <el-select v-model="filterForm.sliceTumorCategory" placeholder="请选择肿瘤分类" clearable
                                    class="picker-form" size="mini">
                                    <el-option v-for="(
                                            data, index
                                        ) in neoplasmkindList" :key="index" :label="data.name"
                                        :value="data.id"></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item class="el-form-item" label="肿瘤分级">
                                <el-select v-model="filterForm.sliceTumorStaging" placeholder="请选择肿瘤分级" clearable
                                    class="picker-form" size="mini">
                                    <el-option v-for="(
                                            data, index
                                        ) in neoplasmStagingList" :key="index" :label="data.name"
                                        :value="data.id"></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="6">
                            <el-form-item class="el-form-item" label="肿瘤分期T">
                                <el-select v-model="filterForm.sliceTumorStagingT" placeholder="请选择" clearable
                                    class="picker-form" size="mini">
                                    <el-option v-for="(
                                            data, index
                                        ) in neoplasmStagingTList" :key="index" :label="data.name"
                                        :value="data.id"></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item class="el-form-item" label="肿瘤分期N">
                                <el-select v-model="filterForm.sliceTumorStagingN" placeholder="请选择" clearable
                                    class="picker-form" size="mini">
                                    <el-option v-for="(
                                            data, index
                                        ) in neoplasmStagingNList" :key="index" :label="data.name"
                                        :value="data.id"></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item class="el-form-item" label="肿瘤分期M">
                                <el-select v-model="filterForm.sliceTumorStagingM" placeholder="请选择" clearable
                                    class="picker-form" size="mini">
                                    <el-option v-for="(
                                            data, index
                                        ) in neoplasmStagingMList" :key="index" :label="data.name"
                                        :value="data.id"></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="6">
                            <el-form-item class="el-form-item" label="整理状态">
                                <el-select v-model="filterForm.sliceSortingStatus" placeholder="请选择整理状态" clearable
                                    class="picker-form" size="mini">
                                    <el-option v-for="(
                                            data, index
                                        ) in sliceSortingStatusList" :key="index" :label="data.name"
                                        :value="data.id"></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item class="el-form-item" label="标注状态">
                                <el-select v-model="filterForm.isAnnotationsInformation
                                    " placeholder="请选择标注状态" clearable class="picker-form" size="mini">
                                    <el-option v-for="(
                                            data, index
                                        ) in isAnnotationsInformationList" :key="index" :label="data.name"
                                        :value="data.id"></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item class="el-form-item" label="上传医院">
                                <el-select v-model="filterForm.sliceHospital" placeholder="请选择切片所属医院" clearable
                                    class="picker-form" size="mini">
                                    <el-option v-for="item in hospitalList" :key="item.id" :label="item.name"
                                        :value="item.id"></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="6">
                            <el-form-item label="病理诊断">
                                <el-input v-model="filterForm.diagnosisDetailOfPathologyDiagnosis
                                    " placeholder="请输入病理诊断" class="input-form" size="mini"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="切片诊断">
                                <el-input v-model="filterForm.slicePathologyDiagnosis" placeholder="请输入切片诊断"
                                    class="input-form" size="mini"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item class="el-form-item" label="流转状态">
                                <el-select v-model="filterForm.circulationStatus" placeholder="请选择切片流转状态" clearable
                                    class="picker-form" size="mini">
                                    <el-option v-for="item in circulationStatusList" :key="item.id" :label="item.name"
                                        :value="item.id"></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </div>
            </el-form>

            <base-table ref="diagnosisTable" :selected="isSelected" @selectionChange="selectionChange"
                @handleSelectAll="handleSelectAll" v-loading="!diagnosisTable.isReady" :data="diagnosisTable.data"
                :header="diagnosisTable.header" :operation="diagnosisTable.operation" :pageInfo="diagnosisTable.pageInfo"
                :buttonVisibleFunc="diagnosisTableButtonVisibleFunc" @handleClick="diagnosisTableButtonClick"
                @pageJumpTo="diagnosisTablePageJumpTo" @sizeChange="diagnosisTableSizeChange"
                @selectAll="handleSelectAll"></base-table>
        </div>
</template>
<script>
import BaseTable from '@templates/components/BaseTable';
import moment from 'moment/moment';
import _ from 'lodash';
import { itemsPerPage } from '@/client/libs/util';
export default {
    name: 'otherPathologyCompare',
    components: {
        BaseTable,
    },
    data() {
        return {
            BiopsyScanUrl: process.env.BiopsyScanUrl,
            pathologyServiceURL: process.env.pathologyServiceURL,
            imageServiceURL: process.env.ImageServiceURL, // 图片服务器地址
            isSelected: true, //是否支持多选
            selectedList: [], //批量修改保存diagnosisIds
            diagnosisTable: {
                isReady: false,
                data: [],
                header: [
                    {
                        label: '分院名称',
                        prop: 'branchName',
                        width: '107',
                    },
                    {
                        label: '病理编号',
                        prop: 'pathologyId',
                        width: '107',
                    },
                    {
                        label: '切片标签',
                        width: '140',
                        isRender: true,
                        render: (h, params) => {
                            return h('img', {
                                attrs: {
                                    src:
                                        this.imageServiceURL +
                                        params.row.labelUrl,
                                },
                                style: {
                                    width: '140px',
                                    height: '65px',
                                },
                            });
                        },
                    },
                    {
                        label: '缩略图',
                        width: '140',
                        isRender: true,
                        render: (h, params) => {
                            return h('img', {
                                attrs: {
                                    src:
                                        this.imageServiceURL +
                                        params.row.previewUrl,
                                },
                                style: {
                                    width: '140px',
                                    height: '65px',
                                },
                            });
                        },
                    },
                    {
                        label: '切片用途',
                        prop: 'slicePurposeName',
                        width: '107',
                    },
                    {
                        label: '标本类别',
                        prop: 'specimenTypeName',
                        width: '107',
                    },
                    {
                        label: '切片类别',
                        prop: 'sliceCategoryName',
                        width: '107',
                    },
                    {
                        label: '取材脏器',
                        prop: 'sampleOrganName',
                        width: '107',
                    },
                    {
                        label: '冰冻',
                        prop: 'freezeTypeName',
                    },
                    {
                        label: '病理诊断',
                        prop: 'diagnosisDetailOfPathologyDiagnosis',
                        width: '107',
                    },
                    {
                        label: '整理状态',
                        prop: 'sliceSortingStatusName',
                        width: '107',
                    },
                    {
                        label: '流转状态',
                        prop: 'circulationStatusName',
                        width: '107',
                    },

                    {
                        label: '切片诊断',
                        prop: 'slicePathologyDiagnosis',
                        width: '107',
                    },
                    {
                        label: 'AI分析结果',
                        width: '110',
                    },
                    {
                        label: '扫描批次',
                        prop: 'biopsyHistoryId',
                        width: '107',
                    },
                    {
                        label: '上传日期',
                        prop: 'createTime',
                        width: '107',
                    },

                    {
                        label: '是否肿瘤',
                        prop: 'sliceIsTumor',
                        width: '107',
                    },
                    {
                        label: '肿瘤分类',
                        prop: 'sliceTumorCategoryName',
                        width: '107',
                    },
                    {
                        label: '肿瘤分级',
                        prop: 'sliceTumorStagingName',
                        width: '107',
                    },
                    {
                        label: 'T',
                        prop: 'sliceTumorStagingTName',
                    },
                    {
                        label: 'N',
                        prop: 'sliceTumorStagingNName',
                    },
                    {
                        label: 'M',
                        prop: 'sliceTumorStagingTMName',
                    },
                    {
                        label: '上传医院',
                        prop: 'sliceHospitalName',
                        width: '107',
                    },
                ],

                operation: [
                    
                ],
                pageInfo: {
                    page: 1,
                    size: itemsPerPage.get(),
                    total: 0,
                },
            },
            createdRange: [],
            filterForm: {
                pathologyId: '', //病理编号
                sliceCategory: '', //切片类别
                freezeType: '', //冰冻
                specimenType: '', // 标本类别
                diagnosisDetailOfPathologyDiagnosis: '', //病理诊断
                slicePathologyDiagnosis: '', //该切片病理诊断
                biopsyHistoryId: '', //扫描批次
                sliceIsTumor: '', //是否肿瘤
                sliceTumorStaging: '', //肿瘤分期
                sliceTumorCategory: '', //该切片肿瘤分类
                sliceTumorStagingT: '', //肿瘤分期T
                sliceTumorStagingN: '', //肿瘤分期N
                sliceTumorStagingM: '', //肿瘤分期M
                sliceSortingStatus: '', //整理状态
                isAnnotationsInformation: '', //标注状态
                sampleOrganId: '', // 取材脏器
                sliceHospital: '', //上传医院
                scanDateEnd: '', // 最小创建时间
                scanDateStart: '', // 最大创建时间
                circulationStatus: '', //流转状态
            },
             // 所需字典对应表
            dictRequestMap: [
                {
                    code: 'sliceUses',
                    arrayKey: 'sliceUsesList',
                },
                {
                    code: 'freezeType',
                    arrayKey: 'freezeTypeList',
                },
                {
                    code: 'sliceCategory',
                    arrayKey: 'sliceCategoryList',
                },
                {
                    code: 'checkCategory',
                    arrayKey: 'checkCategoryList',
                },
                {
                    code: 'SexKind',
                    arrayKey: 'sexKindList',
                },
                {
                    code: 'specimenCategory',
                    arrayKey: 'specimenCategoryList',
                },
                {
                    code: 'neoplasmStaging',
                    arrayKey: 'neoplasmStagingList', //肿瘤分期
                },
                {
                    code: 'neoplasmkind',
                    arrayKey: 'neoplasmkindList', //肿瘤分类
                },
                {
                    code: 'neoplasmStagingT',
                    arrayKey: 'neoplasmStagingTList', //肿瘤分期T
                },
                {
                    code: 'neoplasmStagingN',
                    arrayKey: 'neoplasmStagingNList', //肿瘤分期N
                },
                {
                    code: 'neoplasmStagingM',
                    arrayKey: 'neoplasmStagingMList', //肿瘤分期M
                },
                {
                    code: 'hospitalList',
                    arrayKey: 'hospitalList', //各个医院列表
                },
            ],
            hospitalList: [],
            neoplasmStagingList: [],
            neoplasmkindList: [],
            neoplasmStagingTList: [],
            neoplasmStagingNList: [],
            neoplasmStagingMList: [],
            sliceUsesList: [],
            freezeTypeList: [],
            sliceCategoryList: [],
            checkCategoryList: [],
            sexKindList: [],
            specimenCategoryList: [],
            sampleOrganList: [], // 取材脏器列表
            showExpansion: false,
            isneoplasmList: [
                {
                    id: 0,
                    name: '否',
                },
                {
                    id: 1,
                    name: '是',
                },
            ],
            sliceSortingStatusList: [
                {
                    id: 0,
                    name: '未整理',
                },
                {
                    id: 1,
                    name: '已整理',
                },
            ],
            isAnnotationsInformationList: [
                {
                    id: 0,
                    name: '未标注',
                },
                {
                    id: 1,
                    name: '已标注',
                },
            ],
        }
    },
    mounted(){
        // 获取字典数据
        this.dictionariesRequest();
        // 获取脏器数据
        this.sampleOrganRequest();
        this.diagnosisTableRequest();
    },
    methods: {
        // 请求字典信息
        dictionariesRequest() {
            this.dictRequestMap.forEach((map) => {
                this.$axios({
                    method: 'GET',
                    url: '/PROXY-Remote/dicts/list',
                    params: {
                        code: map.code,
                        page: 0,
                        size: 99,
                    },
                }).then((res) => {
                    if (res && res.data.code === 200) {
                        this[map.arrayKey] = _.clone(res.data.data);

                        if (map.code === 'SexKind') {
                            this[map.arrayKey].push({
                                id: '',
                                name: '全部',
                            });
                        }
                    }
                });
            });
        },
        // 请求脏器信息
        sampleOrganRequest() {
            this.$axios({
                // 详见 axios 请求配置项
                method: 'GET',
                url: '/PROXY-Remote/organs',
                params: {
                    size: 10000,
                },
            }).then((res) => {
                if (res && res.data.code === 200) {
                    res.data.data.forEach((t) => {
                        this.sampleOrganList.push({
                            id: t.id,
                            name: t.name,
                        });
                    });
                }
            });
        },
        // 诊断数据获取
        async diagnosisTableRequest() {
            this.diagnosisTable.isReady = false;

            // 过滤条件为已保存的 formTemp 中获取
            this.filterForm.size = this.diagnosisTable.pageInfo.size;
            this.filterForm.page = this.diagnosisTable.pageInfo.page - 1;

            const res = await this.$axios({
                method: 'POST',
                url: `/PROXY-Remote/biopsy/findAll/biopsyRetrieval`,
                data: this.filterForm,
            });

            if (res && res.data.code === 200) {
                // 请求成功
                const result = res.data;
                // 分页信息
                this.diagnosisTable.pageInfo = {
                    total: result.pageInfo.total,
                    page: result.pageInfo.page + 1,
                    size: result.pageInfo.size,
                };

                // 查询结果数据
                this.diagnosisTable.data = [];
                let _this = this;
                if (result.data) {
                    result.data.forEach((t, index) => {
                        t.sliceSortingStatusName =
                            t.sliceSortingStatus == 0
                                ? '未整理'
                                : t.sliceSortingStatus == 1
                                    ? '已整理'
                                    : '';
                        t.circulationStatusName =
                            t.circulationStatus == 0
                                ? '流转中'
                                : t.circulationStatus == 1
                                    ? '已归档'
                                    : '';

                        t.sliceIsTumor =
                            t.sliceIsTumor == 0
                                ? '否'
                                : t.sliceIsTumor == 1
                                    ? '是'
                                    : '';
                    });
                    _this.diagnosisTable.data = result.data;
                }
            } else {
                this.$message.warning('请求失败');
            }

            this.diagnosisTable.isReady = true;
        },
    },
}
</script>